<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>确认订单</title>
		<#assign base=request.contextPath  />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="${base}/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="${base}/css/style.css" />
		<link rel="stylesheet" type="text/css" href="${base}/fonts/iconfont.css"/>
        <link rel="stylesheet" type="text/css" href="${base}/css/steps.css"/>
        <script src="${base}/js/steps.js" type="text/javascript" charset="utf-8"></script>
        <script src="${base}/js/mui.js"></script>
    </head>
    <style type="text/css">
        .mui-card-cooter img {
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }
        .mui-card-cooter{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            min-height: 44px;
            padding: 10px 15px;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        p {
            font-size: 13px;
            margin-bottom: 0px;
            color: #8f8f94;
        }
        .spanred{
            float: right;
            color: red;
            font-size: 16px;
        }
        .borTandB6px{
            border-bottom: 6px solid #F2F2F2;
        }
        .footer{
            position: absolute;
            width: 100%;
            text-align: center;
            bottom: 0;
            padding: 10px;
        }
        .mui-btn-red{
            width: 100%;
        }
        .mui-icon-weixin {
            font-size: 14px;
            background-color: #3bf305;
            color: white;
            padding: 2px;
            border-radius: 4px;

        }
        .mui-icon-checkmarkempty{
            font-size: 14px;
            background-color: #dd524d;
            color: white;
            padding: 2px;
            border-radius: 30px;
            font-weight: bold;
        }
        .mui-card-header::after {
            display: none;
        }
        #steps2{
            padding: 0 20px 0 40px;border-bottom: 6px solid #F2F2F2;
        }
        .icon-tuijian{
            font-size: 26px;
        }
    </style>
    <body>
    <div class="mui-content">
        <div id="steps2"></div>
        <div class="borTandB6px">
            <div class="mui-card-header">
                订单信息
            </div>
            <div class="mui-card-cooter">
                <p>文章标题</p>
                <p>${articleOrder.title}</p>
            </div>
            <div class="mui-card-footer">
                <p>订单编号</p>
                <p>${articleOrder.orderNumber}</p>
            </div>
        </div>
        <div class="borTandB6px">
            <div class="mui-card-header">
                支付信息
            </div>
            <div class="mui-card-footer">
                <p>订单金额</p>
                <p class="spanred">￥${articleOrder.orderMoeny?number/100}</p>
            </div>
        </div>
        <!-- 支付方式 -->
        <div class="mui-card-header">
            支付方式
        </div>
        <div class="mui-card-footer">
            <p><span class="mui-icon mui-icon-weixin"></span> 微信支付<span class="iconfont icon-tuijian"></span></p>
            <p class="spanred"><span class="mui-icon mui-icon-checkmarkempty"></span></p>
        </div>
        <div class="footer">
            <button type="button" onclick="window.location.href='${base}/wx/user/success_pay.html?id=${articleOrder.id}'" class="mui-btn mui-btn-red">确定支付</button>
        </div>

    </div>
		<script src="${base}/js/mui.js"></script>
		<script type="text/javascript">
            var steps2 = steps({
                el: "#steps2",
                data: [
                    { title: "确认订单", description: "" },
                    { title: "完成支付", description: "" },
                    { title: "发送文章", description: "" }
                ],
                active: 1,
                space: 100,
                dataOrder: ["title", "line", "description"]
            });
		</script>
	</body>
</html>
